<template>
    <section>
        <!--这个相当于是iframe标签-->
        <router-view></router-view>
        <div v-show="$route.path==='/out' "  class="order_out">
            <!--头部start-->
            <el-col :span="24" class="order_out_title">
                <i class="fa fa-list"></i>
                <span class="grid-content bg-purple-dark">待出库订单列表</span>
                <el-form :inline="true" :model="filter" style="margin-left: 20px;display: inline-block;">
                    <el-form-item label="" prop="">
                        <el-input  size="small" v-model="filter.order_number" auto-complete="off" :maxlength="20" placeholder="订单号" @keyup.native="searchOrder"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" v-model="filter.order_number" @click="handleList">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"  @click="handleAddlist">新增</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="default"  @click="handleRestFilters">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <!--头部end-->

            <!--列表start-->
            <el-col class="order_out_tb">
                <el-table
                        ref="multipleTable"
                        :data="outDatas"
                        tooltip-effect="dark"
                        style="width: 100%"
                        v-loading="listLoading"
                        :border=true>
                    <el-table-column
                            type="selection"
                            align="center"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="订单号"
                            align="center"
                            prop="number"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="客户名称"
                            align="center"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="total"
                            label="总计"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="dateCreate"
                            label="生成日期"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="dateUpdate"
                            label="修改日期"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="edit"
                            label="编辑"
                            align="center"
                            @click="showEditForm(scope.row)"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <router-link to="/out/manage">
                                <el-button type="primary" size="small">
                                    <i class='fa fa-eye'></i>
                                </el-button>
                            </router-link>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <!--列表end-->

            <!--分页start-->
            <el-col>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-size=filter.pageSize
                        layout="total, sizes, prev, pager, next, jumper"
                        :total=total>
                </el-pagination>
            </el-col>
            <!--分页end-->
        </div>
    </section>
</template>

<script>
    import util from '../../common/js/util'

    import {getOrderOut,addOrderOut} from  '../../api/api'

    export default {
        data() {
            return {
                //图片最初的加载效果，默认是false
                listLoading: false,
                //数据的总条数
                total: 20,
                //前台像后台传递的数据，是个对象
                filter: {
                    //每页的数据条数
                   pageSize: 15,
                    //
                   page: 1,
                    //前台向后台传递的字段
                   order_number: "",
                   order_name: ""
                },
                //用于接收后台传回的数据
                outDatas: [],
                addForm: {
                    order_name: "",
                    order_status: "",
                    order_number: 1,
                    order_total: "",
                    order_dateCreate: "",
                    order_dateUpdate: "",
                }
            }
        },
        methods: {
            //搜索出库订单---延迟500ms
            searchOrder(){until.debounce(this.handleList,500)()},
            //分页改变
            handleCurrentChange(val) {
//            console.log(val); //val就是页码数
                this.filter.page = val;
                this.handleList();
            },
            //条数改变
            handleSizeChange(size) {
                this.filter.pageSize = size;
                this.handleList();
            },
            //获取订单出库列表信息
            handleList(){
                //获取列表之初，让表格有加载的效果
                this.listLoading=true;
                //获取列表数据(this.filter是前台向后台传递的数据,res是后台返回的数据)
                //前台向后台传递数据，如果是单数，需要变成复数才可以this.filters
                getOrderOut(this.filters).then((res)=>{
//                    console.log(res);
                    this.outDatas=res;
                    this.total=res.length;
                    //获取数据之后，让表格结束加载的效果
                    this.listLoading=false;
                });
            },
            //重置
            handleRestFilters(){
                this.filter={
                    //每页的数据条数
                    pageSize: 15,
                    //
                    page: 1,
                    //前台向后台传递的字段
                    order_number: "",
                    order_name: ""
                };
                this.handleList();
            },
            //新增出库信息
            handleAddlist(){
                this.$refs["addForm"].validate((valid)=>{
                    if(valid){
                        this.listLoading=true;
                        addOrderOut(this.addForm).then((res)=>{
                            this.listLoading=false;
                            if(parseInt(res.status)===1){
                                this.handleList();
                            }
                        })
                    }
                });
                addOrderOut(this.filters).then((res)=>{
                    console.log("add");
                })
            },
        },
        mounted(){
            console.log(this.$route)
            this.handleList();
        }
    }
</script>

<style lang="scss" scoped>
    .order_out {
        margin-top: 10px;
        border: 1px solid #E7E7E7;
        border-top: 2px solid #E7E7E7;
        padding: 0;
        height: 800px;
    .order_out_title {
        margin: 0;
        border-bottom: 1px solid #E7E7E7;
        background-color: #FCFCFC;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        .el-form-item {
            margin-top: 6px;
        }
        i {
            margin-right: 5px;
        }
    }
    .order_out_tb {
        padding: 15px;
    }
    }
</style>